<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="http://at.alicdn.com/t/font_1979579_4mfnastzf09.css">
  <link rel="stylesheet" type="text/css" href="../css/index.css" />
  <script src="../js/jquery-3.1.1.min.js"></script>
  <script src="../js/Page.js"></script>
  <script src="../js/common.js"> </script>
  <title>Document</title>
  <style></style>
</head>

<body style="height :100%">

  <div class="header">
    <div class="header-top w">
      <div class="header_top_box">
        <ul class="header_top_left">
          <li class="heads">欢迎来 到聚美！</li>
          <li></li><a href="../html/login.html">请登录</a></li>
          <li><a href="../html/zhuche.html">快速注册</a></li>
        </ul>

        <ul class="header_top_right ">
          <li class="li1"><a href="">赠品保证</a></li>
          <li class="li1"><a href="">订单查询</a></li>
          <li class="li1"><a href="">收藏的品牌</a></li>
          <li class="myJum li1"><a href="">我的聚美</a>
            <ul class="header_top_right_two">


              <li>我的订单</li>
              <li>我的香蕉卷</li>
              <li>我的红包</li>
              <li>我的余额</li>
              <li>我的收藏</li>
              <li>我的退款</li>
              <li>会员中心</li>
              <li>我的礼品卡</li>
              <li>我的心愿单</li>


            </ul>

          </li>
          <li class="li1 lio"><a href=""><i class="iconfont iconshouji"></i>手机聚美</a></li>
          <li class="li1">|</li>
          <li class="li1"><a href="">更多</a></li>
        </ul>
      </div>
    </div>
    <div class="header-center w">
      <h1><img src="http://p0.jmstatic.com/templates/jumei/images/logo_new_v1.jpg" alt=""></h1>

      <div class="header-centerIp ">
        <form>
          <input class="header_search_input" type="text" id="search" placeholder="补水" required>
          <input class="header_search_btn" type="submit" value="搜索" id="submit">
        </form>


        <!-- <div>  光标移入出现</div> -->
        <ul class="hot_word">
          <li>保湿 |</li>
          <li>保湿 |</li>
          <li>保湿 |</li>
          <li>保湿 |</li>
          <li>保湿 |</li>
          <li>保湿 |</li>
          <li>保湿 |</li>
          <li>保湿

          </li>
        </ul>
      </div>

      <div class="cart_box">
        <img src="http://p0.jmstatic.com/assets/cart.gif" width="28" height="28" class="cart_gif">
        <span class="text"><a href="../html/shoppingCar.html">去购物车结算</a></span>
        <span class="num" style="display: none;"></span>
        <a href=""></a>
      </div>
    </div>

  </div>

  <!-- 导航栏 -->
  <div class="header-bottom">


    <div class="channel_nav_box">
      <div class="channel_nav_list_wrap w">

        <ul class="channel_nav_list">
          <li><a href="http://www.jumei.com?from=Home_show_nav_fresh_new_2" class="current">首页</a></li>
          <li><a href="http://www.jumeiglobal.com/?from=Home_show_nav_fresh_new_2">极速免税店</a> </li>
          <li><a href="http://baby.jumei.com/?from=Home_show_nav_fresh_new_2">母婴特卖</a></li>
          <li><a href="http://mall.jumei.com?from=Home_show_nav_fresh_new_2">美妆商城<b> ^^</b></a></li>
          <li><a href="http://fashion.jumei.com/?from=Home_show_nav_fresh_new_2">国际轻奢</a></li>
          <li><a target="_blank" href="http://pop.jumei.com/dress_sport?from=Home_show_nav_fresh_new_2">服装运动</a></li>
          <li><a target="_blank" href="http://pop.jumei.com/shoe_bag?from=Home_show_nav_fresh_new_2">鞋包配饰</a></li>
        </ul>
      </div>
    </div>
  </div>
  </div>

  <!-- banner区 -->
  <div class="wrapBox">

    <ul class="swiperBox">
      <li class="show"><img src="../img/1.png" alt=""></li>
      <li><img src="../img/2.png" alt=""></li>
      <li><img src="../img/1.png" alt=""></li>
      <li><img src="../img/2.png" alt=""></li>
      <li><img src="../img/1.png" alt=""></li>
    </ul>
    <ul class="dotBox">
      <li class="active"></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
  <!-- 每日必看 -->

  <div class="mustSee w">
    <h2>
      <img src="http://a5.jmstatic.com/c9533ddc6b064f8f/old_top_tit.jpg" alt="">
    </h2>
    <div class="mustSee2">

      <h3>
        <img src="../img/mustSee2.png" alt="">
      </h3>
      <p><img src="http://a1.jmstatic.com/14cf1eff35352616/clock.jpg" alt="">每日十点上新</p>
    </div>
  </div>

  <!-- 商品数据 -->

  <div class="goodsList w">

    <ul class="goodsList1">
      <li>
        <a href="">
          <img src="../img/3.png" alt="">
          <p class="title">【送玫瑰礼盒】迪奥Dior 烈艳蓝金唇膏口红3.5g 999#多色可选 </p>
          <p class="price">￥148</p>

        </a>
      </li>
    </ul>

    <div class="pageChangeBox">
      <div class="pageBox"></div>

    </div>



  </div>


</body>
<script src="../js/index.js">
</script>
<script>

  if (getCookie("logUser")) {
    console.log(getCookie("logUser"))

    console.log($('.heads'))
    $('.heads').text(`欢迎您,${getCookie("logUser")}`);
  }

  var key = "";
  var orderCol = "id";
  var orderType = "asc";
  var showNum = 12;
  var currentPage = 0;

  searchDataAndPage();

  // 查询数据  进行分页
  function searchDataAndPage() {
    getData().then(data => {
      var { count, pageCountMax, list } = data;

      new Page(".pageChangeBox .pageBox", {
        count,
        showNum,
        showPage: 5,
        callback(index) {
          // console.log(index);
          currentPage = index;
          loadHtml();
        }
      })

    }).catch(err => {
      throw err;
    });
  }


  // 查询数据  进行动态生成
  function loadHtml() {
    getData().then(data => {
      var { count, currentPage, pageCountMax, list } = data;
      console.log(data);
      var html = "";
      list.forEach(({ goodsId, goodsImg, goodsImgList, goodsName, goodsPrice }) => {
        html += ` <li>
                        <a href="./goodsDetail.html?gid=${goodsId}">
                            <img src="${goodsImg.replace("n5", "n1")}"
                                alt="">
                            <p class="price">￥${goodsPrice}</p>
                            <p class="title">${goodsName}</p>
                        </a>
                    </li>`;
      });
      $(".goodsList ul").html(html);

    }).catch(err => {
      throw err;
    });
  }







  function getData() {
    console.log(currentPage);
    return new Promise(function (resolve, reject) {
      $.ajax({
        url: "http://www.2003.com/project/php/goodsList.php",
        data: {
          key,
          orderCol,
          orderType,
          currentPage,
          showNum,
        },
        dataType: "json",
        success(data) {
          resolve(data);
        },
        error(err) {
          console.log(err);
          reject(err);
        }
      })
    })
  }



</script>



</html>